<!DOCTYPE html>
<!--导入依赖-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" href="../css/public.css"  th:href="@{css/public.css}" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列   2为科室只能修改删除   0为公司1为部门都可以进行添加删除和修改    这是layui的模板引擎写法-->
<script type="text/html" id="auth-state">

    {{# if (d.type=='2'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# }else{  }}
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>

<script src="../lib/layui-v2.5.5/layui.js"  th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" th:src="@{js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'authorityId',
            treePidName: 'parentId',
            elem: '#munu-table',
            url: 'dept/deptAll',  //把查到的结果封装成api中table.json那个格式
            page: false,
            cols: [
                [
                {type: 'numbers'}, //开头的数字序列
                {field: 'name', minWidth: 250, title: '部门名称'},
                {field: 'type', minWidth: 200, title: '类型名称',
                    templet: function (res) { //res结果值 随便设
                        if (res.type=='0'){
                            return '<span  class="layui-bg-red">公司</span>'
                        }
                        else if (res.type=='1'){
                            return '<span class="layui-bg-orange">部门</span>'
                        }
                        else{
                            return '<span  class="layui-bg-green">科室</span>'
                        }
                    }
                },//状态
                    {field: 'status', minWidth: 100, title: '状态',
                    templet: function (res) { //res结果值 随便设
                        if (res.status=='0'){
                            return '<span  class="layui-badge layui-bg-green">正常</span>'
                        }
                        else{
                            return '<span class="layui-badge layui-bg-gray">禁用</span>'
                        }
                    }
                },//排序号
                    {field: 'sort', minWidth: 50, title: '排序号'},
                    //创建时间
                    {field: 'createTime', minWidth: 200, title: '创建时间'},
                {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
            ]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        /**
         * 主要渲染修改数据数据并进行修改提交
         */
        function setFormValue(obj,data){
            console.log(data); //获取该记录所有的信息
            if (data.status==1){
                data.status='off';
            }else {
                data.status='on';
            }
            // 把数据渲染到这个层上
            form.val("updateSubmit",{
                "id":data.id,
                "parentId":data.parentId,
                "name":data.name,
                "sort":data.sort,
                "status":data.status
            });
            form.on('submit(updateSubmit)',function (data) {
                var datas = data.field;
                console.log(datas);
                if (datas.status == 'on'){
                    datas.status=0;//正常状态
                }else {
                    datas.status=1;
                }
                //向后台发送数据 并进行修改操作
                $.ajax({
                    url:"dept/updateDeptSubmit",
                    type:"POST",
                    data:datas,
                    success:function (result) {
                        // result = JSON.parse(result);
                        if (result.code == 200){
                            layer.msg("修改成功",{
                                icon:6,
                                time:500
                            },function () {
                                parent.window.location.reload();//重新加载页面
                                //刷新主页，关闭我们的弹出页
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        }else {
                            layer.msg("修改失败");
                        }
                    }
                })
                return false;
            })
        };
        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
                layer.confirm("真的要删除吗？",function (index) {
                    //直接向服务器发送删除指令
                    $.ajax({
                        url:"dept/deleteDeptByID",
                        type:"post",
                        data:{id:data.id},
                        success:function (suc) {
                            if (suc.code==200){
                                layer.close(index);
                                layer.msg("删除成功");
                                parent.window.location.reload();
                            }else{
                                layer.msg("删除失败");
                            }
                        }
                    })
                })
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
                //使用弹出层
                layer.open({
                    type:1,
                    title:"修改部门",
                    area: ['50%', '50%'],
                    content: $("#deptUpdateTest")
                });
            //    方式一：通过id查询该记录  方式二：获取该选中记录，然后data渲染
                setFormValue(obj,data);
            }else {
                //添加操作  根据
                var index = layer.open({
                    title: '添加部门',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['50%', '50%'],
                    content: 'addDept?type='+data.type+'&parentId='+data.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });
    });
</script>

<div class="layui-form layuimini-form" id="deptUpdateTest" style="display: none" lay-filter="updateSubmit">
    <input type="hidden" name="parentId">
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label required">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="部门名称不能为空" placeholder="请输入部门名称" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">排序号</label>
        <div class="layui-input-block">
            <input type="number" name="sort"  placeholder="请输入排序号" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateSubmit">确认修改</button>
        </div>
    </div>
</div>
</body>
</html>